<!DOCTYPE html>
<html>
   <head>
      <title>Decimal Calculator Client</title>
      <style>
         body {
            font-family: Segoe UI,Tahoma,Arial,Verdana,sans-serif;
         }

         #calcdisplay {
            color: #333;
            background-color: #fff;
            padding: 0.2em;
            min-height: 3em;
            text-align: right;
         }

         #calc {
            margin: 60px;
            background-color: #028ec9;
            padding: 1em;
            border-radius: 0.5em;
         }

         #calc td {
            height: 100%;
         }

         #calc button {
            width: 100%;
            height: 100%;
            min-height: 3em;
            min-width: 3em;
         }
      </style>

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <script src="/autobahn.min.js"></script>

      <script type="text/javascript">

         var sess = null;
         var clearFirst = false;

         $(document).ready(function()
         {
            // the URL of the WAMP Router (e.g. Crossbar.io)
            //
            var wsuri;
            if (document.location.origin == "file://") {
               wsuri = "ws://localhost:8080/ws";
            } else {
               wsuri = "ws://" + document.location.hostname + ":8080/ws";
            }
            
            // connect to WAMP server
            //
            var connection = new autobahn.Connection({
               url: wsuri,
               realm: 'crossbardemo'
            });

            connection.onopen = function (session) {
               console.log("connected to " + wsuri);
               sess = session;
            };

            connection.onclose = function (reason, details) {
               console.log("connection gone", reason, details);
               sess = null;
            }

            connection.open();
         });


         function key_digit(d) {

            var s = $('#calcdisplay').html();

            if (clearFirst) {
               if (d == ".") {
                  s = "0.";
               } else {
                  s = d;
               }
               clearFirst = false;
            } else {
               if (d == ".") {
                  if (s.indexOf(".") == -1) {
                     s += ".";
                  }
               }
               else {
                  if (s == "0") {
                     s = d;
                  }
                  else {
                     s += d;
                  }
               }
            }
            $('#calcdisplay').html(s);
         }

         function key_op(op) {

            var args = null;
            var proc;

            if (op == "C") {
               proc = "com.example.calculator.clear";
            } else {
               proc = "com.example.calculator.calc";
               args = [op, $('#calcdisplay').html()];
            }

            sess.call(proc, args).then(
               function (res) {
                  $('#calcdisplay').html(res); 
               },
               function (err) {
                  alert("Error (" + err.reason + ")");
               }
            );

            clearFirst = true;
         }
     </script>
   </head>
   <body>
      <h1>Decimal Calculator Client</h1>
      <noscript>
         <span style="color: #f00; font-weight: bold;">
            You need to turn on JavaScript.
         </span>
      </noscript>
      <table id="calc">
         <tr>
            <td id="calcdisplay" colspan="5">0</td>
         </tr>
         <tr><td style="height: 0.5em;" colspan="5"></td></tr>
         <tr>
            <td><button onclick='key_digit("7");'>7</button></td>
            <td><button onclick='key_digit("8");'>8</button></td>
            <td><button onclick='key_digit("9");'>9</button></td>
            <td><button onclick='key_op("/");'>/</button></td>
            <td rowspan="2"><button onclick='key_op("C");'>C</button></td>
         </tr>
         <tr>
            <td><button onclick='key_digit("4");'>4</button></td>
            <td><button onclick='key_digit("5");'>5</button></td>
            <td><button onclick='key_digit("6");'>6</button></td>
            <td><button onclick='key_op("*");'>*</button></td>
         </tr>
         <tr>
            <td><button onclick='key_digit("1");'>1</button></td>
            <td><button onclick='key_digit("2");'>2</button></td>
            <td><button onclick='key_digit("3");'>3</button></td>
            <td><button onclick='key_op("-");'>-</button></td>
            <td rowspan="2"><button onclick='key_op("=");'>=</button></td>
         </tr>
         <tr>
            <td colspan="2"><button onclick='key_digit("0");'>0</button></td>
            <td><button onclick='key_digit(".");'>.</button></td>
            <td><button onclick='key_op("+");'>+</button></td>
         </tr>
      </table>
   </body>
 </html>
